
<template>
  <div class="p-2">

    <el-card shadow="hover">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="市">
          <el-select  placeholder="请选择市" @change="handleCityChange">
            <!-- <el-option v-for="city in cityOptions" :key="city.regionId" :label="city.regionName" :value="city.regionName" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="县" >
          <el-select placeholder="请选择县">
            <!-- <el-option v-for="county in countyOptions" :key="county.regionId" :label="county.regionName" :value="county.regionName" /> -->
          </el-select>
        </el-form-item>
        <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
      </el-form>
    </el-card>

    <baidu-map class="bm-view" :zoom="12" :center="{lng:114.655716, lat:38.050204}":scroll-wheel-zoom="true"
      :minZoom="5"
      :maxZoom="20"
      :wheelZoomDelta="0.1"
      :animationDuration="300" 
      >
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" fillOpacity="1"></bm-navigation>
      <bm-boundary name="石家庄长安区" :strokeWeight="2" strokeColor="blue"></bm-boundary>
      <bml-marker-clusterer :averageCenter="true" :styles="styles">
          <bm-marker v-for="marker of markers" :key="marker" :position="{lng: marker.lng, lat: marker.lat}" @dragend="updateMarker($event, marker)" :dragging="true"></bm-marker>
        </bml-marker-clusterer>
    </baidu-map>

  </div>
  </template>
  <script setup>
  import { ref } from 'vue';
  
  
  const markers = ref([]);
  const styles = ref([]);
  const customStyles = ref(false);
  
  
  
  const addMarker = () => {
    const position = { lng:114.655716, lat: 38.050204}
    markers.value.push(position);
    for (let i = 0; i < 10; i++) {
      const position = { lng: Math.random()/15  + 114.655716, lat: Math.random()/15 + 38.050204}
      markers.value.push(position);
    }
  };
  
  const updateMarker = ({ point }, marker) => {
    marker.lng = point.lng
    marker.lat = point.lat
  };
  const removeMarker = () => {
    markers.value.pop()
  };
  const changeStyles = () => {
    customStyles.value = !customStyles.value
    const EXAMPLE_URL = "http://api.map.baidu.com/library/MarkerClusterer/1.2/examples/"
    const stylesArr = [{
      url: EXAMPLE_URL + 'images/heart30.png',
      size: {
        width: 30,
        height: 26
      },
      opt_anchor: [16, 0],
      textColor: '#ff00ff',
      opt_textSize: 10
    }, {
      url: EXAMPLE_URL + 'images/heart40.png',
      size: {
        width: 40,
        height: 35
      },
      opt_anchor: [40, 35],
      textColor: '#ff0000',
      opt_textSize: 12
    }, {
      url: EXAMPLE_URL + 'images/heart50.png',
      size: {
        width: 50,
        height: 44
      },
      opt_anchor: [32, 0],
      textColor: 'white',
      opt_textSize: 14
    }]
    styles.value = customStyles.value ? stylesArr : []
  };
  
  const getMarkers = () => {
    const position = { lng:114.655716, lat: 38.050204}
    markers.value.push(position);
    for (let i = 0; i < 10; i++) {
      const position = { lng: Math.random()/15  + 114.655716, lat: Math.random()/15 + 38.050204}
      markers.value.push(position);
    }
  };
  
  
  getMarkers();
  
  </script>
  <style>
  .bm-view {
    width: 100%;
    height: 1000px;
  }
  </style>